<template>
  <div class="app-container">
    <el-upload
      class="upload-demo"
      style="float: left"
      ref="upload"
      action="fakeaction"
      :show-file-list="false"
      :http-request="uploadSectionFile"
    >
      <el-button type="primary" icon="el-icon-upload2" @click="history" round
        >文件上传</el-button
      >
    </el-upload>

    <el-button
      type="danger"
      style="margin-left: 10px"
      icon="el-icon-back"
      @click="onCancel"
      round
      >返回</el-button
    >

    <!-- <el-button type="success" icon="el-icon-download" @click="history" round
      >文件下载</el-button
    > -->
    <div style="float: right">
      <el-input
        placeholder="文件名称"
        style="width: 200px; margin-left: 10px"
        @keyup.enter.native="load(true)"
        v-model="listQuery.s"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>

    <el-table
      v-loading="listLoading"
      ref="singleTable"
      element-loading-text="Loading"
      :data="list"
      @row-click="handleSelectionChange"
      fit
      highlight-current-row
    >
      <!--<el-table-column prop="id" label="ID"></el-table-column>-->
      <el-table-column prop="id" label="编号" width="80"></el-table-column>
      <el-table-column prop="filename" label="文件名"></el-table-column>
      <el-table-column prop="filetype" label="类型"></el-table-column>
      <el-table-column prop="filedesc" label="描述"></el-table-column>
      <el-table-column prop="size" label="大小">
        <template slot-scope="scope">
          {{ sizeformater(scope.row.size) }}
        </template>
      </el-table-column>
      <el-table-column prop="ctime" label="上传时间"></el-table-column>
      <el-table-column prop="user" label="上传者"></el-table-column>
      <!-- <el-table-column prop="dowcnt" label="下载次数"></el-table-column> -->
      <el-table-column label="">
        <template slot-scope="scope">
          <a :href="burl + scope.row.url" target="_blank">下载</a>
        </template>
      </el-table-column>
      <!--
          <el-table-column prop="candidateUsers" label="候选人"></el-table-column>
      <el-table-column prop="candidateGroups" label="候选组"></el-table-column>
      <el-table-column prop="endDate" label="结束时间"></el-table-column>
         --->
    </el-table>

    <div class="block" style="float: right">
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="listQuery.limit"
        :current-page="listQuery.page"
        :total="listQuery.total"
      >
      </el-pagination>
    </div>
  </div>
</template>    

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { fileUpload, files, BASEURL } from '@/api/workflow'
import { UserModule } from '@/store/modules/user'
@Component({
  name: 'oa-files'
})
export default class extends Vue {
  private burl = (BASEURL || '').replace(/\/$/gi, '')
  private listQuery = {
    page: 1,
    limit: 10,
    total: 0,
    taskid: this.$route.query.taskid,
    instid: this.$route.query.instid,
    s: ''
  }

  private onCancel() {
    this.$router.go(-1)
  }

  handleCurrentChange(page: any) {
    this.listQuery.page = page
    this.load()
  }

  private list: any = []
  created() {
    this.load()
  }
  private sizeformater(size: any) {
    if (size >= 1024 * 1024) {
      return (size / 1024 / 1024).toFixed(2) + 'M'
    } else if (size >= 1024) {
      return (size / 1024).toFixed(2) + 'K'
    } else {
      return size + 'B'
    }
  }
  private async load(r: boolean = false) {
    if (r) this.listQuery.page = 1
    
    const { data } = await files(this.listQuery)
    this.list = data.ls
    this.listQuery.total = data.total
  }
  private uploadSectionFile(params: any) {
    const file = params.file,
      fileType = file.type,
      isLt2M = file.size
    // 这里常规检验，看项目需求而定
    // if (!isImage) {
    //   this.$message.error('只能上传图片格式png、jpg、gif!')
    //   return
    // }
    // if (!isLt2M) {
    //   this.$message.error('只能上传图片大小小于2M')
    //   return
    // }
    // 根据后台需求数据格式
    const form = new FormData()
    // 文件对象
    form.append('file', file)
    // 本例子主要要在请求时添加特定属性，所以要用自己方法覆盖默认的action
    form.append('filetype', fileType)

    form.append('size', isLt2M)

    form.append('filename', file.name)
    form.append('filedesc', file.name.substring(0, file.name.indexOf('.')))
    //上传用户
    //任务id
    var taskid: any = this.$route.query.taskid
    if (taskid) {
      form.append('taskid', taskid)
    }

    var instid: any = this.$route.query.instid
    if (instid) {
      form.append('instid', instid)
    }
    form.append('user', UserModule.name)

    // 项目封装的请求方法，下面做简单介绍
    fileUpload(form)
      .then((res) => {
        //自行处理各种情况
        this.load()
      })
      .catch(() => {
        // xxx
      })
  }
}
</script>